<template>
    <div>
      <el-table
      :data="tableData"
      :stripe="true"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="发送人">
          <span>{{ props.row.sent_name+'('+props.row.sent_id+')'}}</span>
          </el-form-item>
          <el-form-item label="发送日期">
          <span>{{ props.row.chat_date }}</span>
          </el-form-item>
          <el-form-item label="发送时间">
          <span>{{ props.row.chat_time }}</span>
          </el-form-item>
          <el-form-item label="信件内容">
          <span>{{ props.row.content}}</span>
          </el-form-item>
          <el-form-item label="状态">
          <span>{{ props.row.status === 0?'未回复':'已回复' }}</span>
          </el-form-item>
          <el-form-item label="回复内容">
          <span>{{ props.row.status ===0? '未回复':props.row.response }}</span>
          </el-form-item>
          <el-form-item label="回复日期">
          <span>{{ props.row.status ===0? '未回复':props.row.resp_date}}</span>
          </el-form-item>
          <el-form-item label="回复时间">
          <span>{{ props.row.status ===0? '未回复':props.row.resp_time }}</span>
          </el-form-item>
        </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="发送人">
        <template slot-scope="scope">
        <span>{{ scope.row.sent_name+'('+scope.row.sent_id+')' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="发送日期">
        <template slot-scope="scope">
        <span>{{ scope.row.chat_date }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="发送时间">
        <template slot-scope="scope">
        <span >{{ scope.row.chat_time }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="信件内容">
        <template slot-scope="scope">
        <span >{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :filters="[{ text: '已回复', value: 1 }, { text: '未回复', value: 0 }]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
        label="状态">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status === 1 ? 'primary' : 'danger'"
            disable-transitions>{{scope.row.status===1?'已回复':'未回复'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column 
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="reply(scope.$index, scope.row)">回复</el-button>
        </template>
      </el-table-column>
      </el-table>
    </div>
  
  </template>
  
  <script>
  import { showReciveMsg,reply } from '@/api/user'
  
  
  export default {
  
    data() {
      return {
        tableData:[]
      }
    },
    created: function() {
        showReciveMsg(this.$store.getters.token).then(response=>{
          this.tableData=response.data.msg
        })
    },
    methods: {
      filterTag(value, row) {
        return row.status === value;
      },
      reply(index,row) {
        if(this.tableData[index].status===0){
          this.$prompt('请输入内容', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
          }).then(({ value }) => {
            reply({'id':this.tableData[index].id,'content':value}).then(response=>{
              this.$message({
                type: response.data.message,
                message: response.message 
              });
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            });       
          });
        }else{
          this.$message({
            type: 'error',
            message: '该信件已回复过'
          });
        }
        
      }
      
    }
  
  }
  
  </script>
  
  
  <style>
  .demo-table-expand {
      font-size: 0;
  }
  .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
  }
  </style>